<!--
 * @Author: xuzehan h935351619@163.com
 * @Date: 2025-11-09 11:25:40
 * @LastEditors: xuzehan h935351619@163.com
 * @LastEditTime: 2025-11-10 18:19:10
 * @FilePath: \hardware_monitoring\src\views\dashboard\components\status.vue
 * @Description: 系统状态监控组件
-->
<template>
  <div>
    <div class="container">
      <a-page-header title="系统状态" sub-title="主机、接口和电源状态概览">
        <template #extra>
          <a-button type="primary" @click="refreshData">
            <a-icon type="reload" />
            刷新数据
          </a-button>
        </template>
      </a-page-header>

      <!-- 主机信息卡片 -->
      <a-card class="card-container" title="主机信息">
        <a-row :gutter="24">
          <a-col :span="16">
            <a-descriptions :column="2" size="small">
              <a-descriptions-item label="主机名称">
                {{ data.host.name }}
              </a-descriptions-item>
              <a-descriptions-item label="主机ID">
                {{ data.host.id }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :span="8">
            <a-descriptions :column="1" size="small">
              <a-descriptions-item label="代理状态">
                <a-tag :color="getStatusColor(data.host.agent_status)" class="status-tag">
                  {{ data.host.agent_status }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </a-card>

      <!-- 控制接口卡片 -->
      <a-card class="card-container" title="控制接口">
        <a-table :columns="ctrlIntfColumns" :data-source="data.host.ctrl_intf" :pagination="false" size="small">
          <template slot="status" slot-scope="status">
            <a-tag :color="getStatusColor(status)" class="status-tag">
              {{ status }}
            </a-tag>
          </template>
        </a-table>
      </a-card>

      <!-- PCI接口卡片 -->
      <a-card class="card-container" title="板卡资源">
        <a-table :columns="pciIntfColumns" :data-source="data.host.pci_intf" :pagination="false" size="small">
          <template slot="status" slot-scope="status">
            <a-tag :color="getStatusColor(status)" class="status-tag">
              {{ status }}
            </a-tag>
          </template>
        </a-table>
      </a-card>

      <!-- 电源信息卡片 -->
      <a-card class="card-container" title="电源信息">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-descriptions :column="2" size="small">
              <a-descriptions-item label="电源名称">
                {{ data.power.name }}
              </a-descriptions-item>
              <a-descriptions-item label="硬件ID">
                {{ data.power.hwid }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :span="8">
            <a-descriptions :column="2" size="small">
              <a-descriptions-item label="制造商">
                {{ data.power.manufacturer }}
              </a-descriptions-item>
              <a-descriptions-item label="状态">
                <a-tag :color="getStatusColor(data.power.status)" class="status-tag">
                  {{ data.power.status }}
                </a-tag>
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </a-card>

      <!-- 目标信息卡片 -->
      <a-card class="card-container" title="目标信息">
        <div v-if="Object.keys(data.target).length === 0" class="empty-section">
          <a-icon type="inbox" style="font-size: 48px; margin-bottom: 16px;" />
          <p>暂无目标信息</p>
        </div>
        <div v-else>
          <a-descriptions :column="2" size="small">
            <a-descriptions-item v-for="(value, key) in data.target" :key="key" :label="key">
              {{ value }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'SystemStatus',
  data() {
    return {
      data: {
        host: {
          name: 'none',
          id: 'none',
          ctrl_intf: [
            { type: 'eth', name: 'none', ip: 'none', status: 'idle' },
            { type: 'serial', name: 'none', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' }
          ],
          pci_intf: [
            { type: 'serial', name: 'None', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' },
            { type: 'ar29', name: 'None', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' },
            { type: 'm1553b', name: 'None', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' },
            { type: '1394b', name: 'None', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' },
            { type: 'can', name: 'None', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' },
            { type: 'canfd', name: 'None', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' },
            { type: 'eth', name: 'None', hwid: 'None', manufacturer: 'None', location: 'None', status: 'idle' }
          ],
          agent_status: 'idle'
        },
        power: { name: 'None', hwid: 'None', manufacturer: 'None', status: 'idle' },
        target: {}
      },
      ctrlIntfColumns: [
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type'
        },
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: 'IP地址',
          dataIndex: 'ip',
          key: 'ip'
        },
        {
          title: '硬件ID',
          dataIndex: 'hwid',
          key: 'hwid'
        },
        {
          title: '制造商',
          dataIndex: 'manufacturer',
          key: 'manufacturer'
        },
        {
          title: '位置',
          dataIndex: 'location',
          key: 'location'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ],
      pciIntfColumns: [
        {
          title: '类型',
          dataIndex: 'type',
          key: 'type'
        },
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '硬件ID',
          dataIndex: 'hwid',
          key: 'hwid'
        },
        {
          title: '制造商',
          dataIndex: 'manufacturer',
          key: 'manufacturer'
        },
        {
          title: '位置',
          dataIndex: 'location',
          key: 'location'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['websocketMsg'])
  },
  watch: {
    websocketMsg: {
      handler(val) {
        try {
          let msg = JSON.parse(val)
          console.log('收到状态数据:', msg)

          // 检查消息类型是否为状态更新
          if (msg.header && msg.header.message_type === 'state' && msg.body) {
            this.updateStatusData(msg.body)
          }
        } catch (error) {
          console.error('解析websocket消息失败:', error)
        }
      },
      deep: true,
      immediate: false
    }
  },
  methods: {
    /**
     * 更新状态数据
     */
    updateStatusData(newData) {
      console.log('更新状态数据:', newData)

      // 更新主机信息
      if (newData.host) {
        this.updateHostData(newData.host)
      }

      // 更新电源信息
      if (newData.power) {
        this.data.power = { ...this.data.power, ...newData.power }
      }

      // 更新目标信息
      if (newData.target) {
        this.data.target = { ...this.data.target, ...newData.target }
      }

      console.log('更新后的数据:', this.data)
    },

    /**
     * 更新主机数据
     */
    updateHostData(hostData) {
      // 更新基本主机信息
      if (hostData.name) this.data.host.name = hostData.name
      if (hostData.id) this.data.host.id = hostData.id
      if (hostData.agent_status) this.data.host.agent_status = hostData.agent_status

      // 更新控制接口
      if (hostData.ctrl_intf && Array.isArray(hostData.ctrl_intf)) {
        this.data.host.ctrl_intf = hostData.ctrl_intf.map((intf, index) => {
          // 保持与现有数据的结构一致
          return {
            type: intf.type || 'unknown',
            name: intf.name || 'none',
            ip: intf.ip || 'none',
            hwid: intf.hwid || 'None',
            manufacturer: intf.manufacturer || 'None',
            location: intf.location || 'None',
            status: intf.status || 'idle'
          }
        })
      }

      // 更新PCI接口
      if (hostData.pci_intf && Array.isArray(hostData.pci_intf)) {
        this.data.host.pci_intf = hostData.pci_intf.map((intf, index) => {
          return {
            type: intf.type || 'unknown',
            name: intf.name || 'None',
            hwid: intf.hwid || 'None',
            manufacturer: intf.manufacturer || 'None',
            location: intf.location || 'None',
            status: intf.status || 'idle'
          }
        })
      }
    },

    /**
     * 获取状态颜色
     */
    getStatusColor(status) {
      const colorMap = {
        idle: 'blue',
        active: 'green',
        error: 'red',
        warning: 'orange',
        running: 'green',
        stopped: 'red',
        connected: 'green',
        disconnected: 'red'
      }
      return colorMap[status] || 'default'
    },

    /**
     * 刷新数据
     */
    refreshData() {
      this.$message.info('数据已刷新')
      // 在实际应用中，这里可以调用API重新获取数据
      console.log('当前数据状态:', this.data)
    }
  },

  mounted() {
    console.log('系统状态组件已加载，等待WebSocket数据...')
  }
}
</script>

<style scoped>
.container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.card-container {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-tag {
  border-radius: 12px;
  font-weight: 500;
}

.empty-section {
  text-align: center;
  padding: 40px 0;
  color: rgba(0, 0, 0, 0.45);
}
</style>
